<div>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h2 translate="settings.title" translate-values="{username: '{{settingsAccount.login}}'}">User settings for [<b>{{settingsAccount.login}}</b>]</h2>

            <div class="alert alert-success" ng-show="success" translate="settings.messages.success">
                <strong>Settings saved!</strong>
            </div>

            <div class="alert alert-danger" ng-show="errorEmailExists" translate="settings.messages.error.emailexists">
                <strong>E-mail is already in use!</strong> Please choose another one.
            </div>

            <div class="alert alert-danger" ng-show="error" translate="settings.messages.error.fail">
                <strong>An error has occurred!</strong> Settings could not be saved.
            </div>

            <form name="form" role="form" novalidate ng-submit="save()" show-validation>


                <div class="form-group">
                    <label translate="settings.form.userNo">userNo</label>
                    <input type="text" class="form-control" name="userNo" placeholder="{{'settings.form.userNo.placeholder' | translate}}" ng-model="settingsAccount.userNo" readonly>
                </div>

                <div class="form-group">
                    <label translate="settings.form.login">Login</label>
                    <input type="text" class="form-control" name="login" placeholder="{{'settings.form.login.placeholder' | translate}}" ng-model="settingsAccount.login" ng-minlength=1 ng-maxlength=50 required maxlength="50">
                    <div ng-show="form.login.$dirty && form.login.$invalid">
                        <p class="help-block"
                               ng-show="form.login.$error.required" translate="settings.messages.validate.login.required">
                            Your first name is required.
                        </p>
                        <p class="help-block"
                               ng-show="form.login.$error.minlength" translate="settings.messages.validate.login.minlength">
                            Your first name is required to be at least 1 character
                        </p>
                        <p class="help-block"
                               ng-show="form.login.$error.maxlength" translate="settings.messages.validate.login.maxlength">
                            Your first name cannot be longer than 50 characters
                        </p>
                    </div>
                </div>

                <div class="form-group">
                    <label translate="settings.form.firstname">First Name</label>
                    <input type="text" class="form-control" name="firstName" placeholder="{{'settings.form.firstname.placeholder' | translate}}"
                           ng-model="settingsAccount.firstName" ng-minlength=1 ng-maxlength=50 required maxlength="50">
                    <div ng-show="form.firstName.$dirty && form.firstName.$invalid">
                        <p class="help-block"
                               ng-show="form.firstName.$error.required" translate="settings.messages.validate.firstname.required">
                            Your first name is required.
                        </p>
                        <p class="help-block"
                               ng-show="form.firstName.$error.minlength" translate="settings.messages.validate.firstname.minlength">
                            Your first name is required to be at least 1 character
                        </p>
                        <p class="help-block"
                               ng-show="form.firstName.$error.maxlength" translate="settings.messages.validate.firstname.maxlength">
                            Your first name cannot be longer than 50 characters
                        </p>
                    </div>
                </div>
                <div class="form-group">
                    <label translate="settings.form.lastname">Last Name</label>
                    <input type="text" class="form-control" name="lastName" placeholder="{{'settings.form.lastname.placeholder' | translate}}"
                           ng-model="settingsAccount.lastName" ng-minlength=1 ng-maxlength=50 required maxlength="50">
                    <div ng-show="form.lastName.$dirty && form.lastName.$invalid">
                        <p class="help-block"
                               ng-show="form.lastName.$error.required" translate="settings.messages.validate.lastname.required">
                            Your last name is required.
                        </p>
                        <p class="help-block"
                               ng-show="form.lastName.$error.minlength" translate="settings.messages.validate.lastname.minlength">
                            Your last name is required to be at least 1 character
                        </p>
                        <p class="help-block"
                               ng-show="form.lastName.$error.maxlength" translate="settings.messages.validate.lastname.maxlength">
                            Your last name cannot be longer than 50 characters
                        </p>
                    </div>
                </div>
                <div class="form-group">
                    <label translate="global.form.email">E-mail</label>
                    <input type="email" class="form-control" name="email" placeholder="{{'global.form.email.placeholder' | translate}}"
                           ng-model="settingsAccount.email" ng-minlength=5 ng-maxlength=100 required maxlength="100">
                    <div ng-show="form.email.$dirty && form.email.$invalid">
                        <p class="help-block"
                               ng-show="form.email.$error.required" translate="global.messages.validate.email.required">
                            Your e-mail is required.
                        </p>
                        <p class="help-block"
                               ng-show="form.email.$error.email" translate="global.messages.validate.email.invalid">
                            Your e-mail is invalid.
                        </p>
                        <p class="help-block"
                               ng-show="form.email.$error.minlength" translate="global.messages.validate.email.minlength">
                            Your e-mail is required to be at least 5 characters
                        </p>
                        <p class="help-block"
                               ng-show="form.email.$error.maxlength" translate="global.messages.validate.email.maxlength">
                            Your e-mail cannot be longer than 100 characters
                        </p>
                    </div>
                </div>
                <div class="form-group">
                    <label translate="settings.form.phone">Phone</label>
                    <input type="text" class="form-control" name="phone" placeholder="{{'settings.form.phone.placeholder' | translate}}" ng-model="settingsAccount.phone" ng-minlength=1 ng-maxlength=15 required maxlength="15">
                </div>
                <div class="form-group">
                    <label translate="settings.form.classes">Class</label>
                    <input type="text" class="form-control" name="classes" placeholder="{{'settings.form.classes.placeholder' | translate}}" ng-model="settingsAccount.classes" ng-minlength=1 ng-maxlength=50 required maxlength="50">
                </div>
                <div class="form-group">
                    <label translate="settings.form.age">Age</label>
                    <input type="number" class="form-control" name="age" placeholder="{{'settings.form.age.placeholder' | translate}}" ng-model="settingsAccount.age">
                </div>
                <div class="form-group">
                    <label translate="settings.form.description">description</label>
                    <textarea class="form-control" name="description" placeholder="{{'settings.form.description.placeholder' | translate}}" ng-model="settingsAccount.description" cols="30" rows="10"></textarea>
                </div>
                <button type="submit" ng-disabled="form.$invalid" class="btn btn-primary" translate="settings.form.button">Save</button>
            </form>
        </div>
    </div>

</div>
